<template>
  <div class="login-bg">
    <div class="login-center">
      <!-- 核心的登录表单 -->
      <div class="login-inner">
        <h3>宇宙后台管理系统</h3>

        <p>———— <span>登录页</span> ————</p>

        <el-form
          :model="loginForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
          size="mini"
        >
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="loginForm.username"
              autocomplete="off"
              placeholder="请输入用户名/邮箱/手机号"
              prefix-icon="iconfont icon-yonghu1"
              @keyup.native.enter="submitForm('ruleForm')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :type="flag ? 'password' : 'text'"
              v-model="loginForm.password"
              autocomplete="off"
              placeholder="请输入密码/验证码"
              prefix-icon="iconfont icon-mima"
              @keyup.native.enter="submitForm('ruleForm')"
            >
              <template #suffix>
                <i
                  class="iconfont point"
                  :class="flag ? 'icon-eyes' : 'icon-eyes-'"
                  @click="flag = !flag"
                ></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              :loading="isClick"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// 在vue中 @/ 代表从根目录src开始
import { login } from '@/api/users.js'
import { getNewRoutes } from '../../router/index.js'

export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名!'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码!'))
      } else {
        callback()
      }
    }
    return {
      // 1.0 表单的数据对象
      loginForm: {
        username: '',
        password: ''
      },
      // 2.0 表单的规则对象 - 要求字段名称和数据对象一致
      rules: {
        // validator 校验器   trigger  触发方式
        username: [{ validator: validateUserName, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }]
      },
      flag: true,
      isClick: false
    }
  },
  methods: {
    submitForm(formName) {
      // this.$refs 在vue中获取DOM   validate 校验
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.isClick = true
          // 校验通过，可以发请求了
          // const {username, password} = this.loginForm
          // login(this.loginForm).then((res) => {
          //   console.log(res)
          // })
          // async 和 await 只能在一个函数中使用
          const { code, msg, data } = await login(this.loginForm)
          if (code === 1) {
            // element-ui 提供了一个页面提示的组件
            this.$message.success(msg)
            // 保存用户的信息和token
            window.localStorage.setItem('users', JSON.stringify(data))
            setTimeout(() => {
              getNewRoutes()
              this.$router.push('/')
            }, 1500)
          } else {
            this.isClick = false
            this.$message.error(msg)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.login-bg {
  height: 100%;
  // background-image: linear-gradient(
  //   45deg,
  //   #3a59e7 20%,
  //   #304bce 25%,
  //   #23268f 50%
  // );
  display: flex;
  justify-content: center;
  align-items: center;
  background: #10042a;

  .login-center {
    width: 850px;
    height: 550px;
    background: url('../../assets/imgs/login-bg1.jpg') no-repeat left 10px;
    background-size: 450px auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .login-inner {
      width: 320px;
      height: 320px;
      border-radius: 4px;
      background-color: rgba(25, 8, 62, 0.6);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
      padding: 30px;
      box-sizing: border-box;

      .point {
        cursor: pointer;
      }

      .el-button {
        width: 100%;
      }

      h3 {
        color: #fff;
        text-align: center;
        letter-spacing: 4px;
        font-size: 24px;
        font-weight: normal;
      }

      p {
        font-size: 12px;
        color: #999;
        text-align: center;
        margin-bottom: 30px;
      }
    }
  }
}
</style>
